<template>
    <div>
        <a-modal v-model="sendEmailCodeFormVisible" title="邮件身份验证" ok-text="提交" cancel-text="取消"
                 @ok="submitVerifyByEmail('sendEmailCodeForm')" @cancel="closeModel">
            <a-form-model
                    style="text-align: center"
                    ref="sendEmailCodeForm"
                    :model="emailCodeSend"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
            >
                <div>
                    您当前的邮箱为:{{email}}
                </div>
                <a-form-model-item ref="code" label="验证码" prop="code">
                    <a-input
                            v-model="emailCodeSend.code"
                    />
                    <a-button type="primary" @click="fetchCode" :disabled="!isStop">{{sendCodeMsg}}</a-button>

                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <update-pwd-model :update-pwd-visible="updatePwdVisible"
                          @closeUpdatePwdForm="closeUpdatePwdForm"></update-pwd-model>
    </div>
</template>

<script>
    import loginApi from "../../../api/login";
    import verifyApi from "../../../api/user/account/verifyApi";
    import addressApi from "../../../api/info/addressApi";
    import UpdatePwdModel from "./updatePwdModel";
    import userApi from "../../../api/user/userApi";

    export default {
        components: {UpdatePwdModel},
        props: {
            email: String,
            sendEmailCodeFormVisible: Boolean
        },
        name: "sendEmailCodeModel",
        data() {
            let validateRawPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原始密码'));
                }
                console.log(value)
            };
            let validateNewPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    /*if (this.updatePwdData.checkPwd !== '') {
                        this.$refs.updatePwdForm.validateField('checkPwd');
                    }*/
                    callback();
                }
                console.log(value)

            };
            let validateNewPwdCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入确认密码'));
                } else if (value !== this.updatePwdData.newPwd) {
                    callback(new Error("两次输入密码不一致"));
                } else {
                    callback();
                }
                console.log(value)

            };
            return {
                emailCodeSend: {
                    mobile: '',
                    code: ""
                },
                labelCol: {span: 8},
                wrapperCol: {span: 8},
                isStop: true, //是否倒计时结束
                sendCodeMsg: "获取邮件验证码",

                updatePwdVisible: false,

            }
        },
        methods: {
            fetchCode() {
                let email = this.email;

                let seconds = 20;
                this.isStop = false;

                const that = this; //在setInterval中，this不是vue实例，需要使用that转一下

                verifyApi.emailCode(null, true).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success("发送成功", 1);
                        let id = setInterval(function () {
                            that.sendCodeMsg = seconds + "秒后可再次获取";
                            if (seconds === 0) {
                                clearInterval(id);
                                that.sendCodeMsg = "点击获取邮件验证码";
                                that.isStop = true;
                            }
                            seconds--;
                        }, 1000);
                    } else {
                        that.sendCodeMsg = "点击获取邮件验证码";
                        that.isStop = true;
                    }
                });
            },

            /**
             * 提交邮箱验证
             */
            submitVerifyByEmail(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        console.log(this.emailCodeSend)
                        verifyApi.verifyMobileEmailCode(this.email, this.emailCodeSend.code, false).then(resp => {
                            if (resp.data.flag) {
                                this.$emit("closeEmailForm")
                                this.updatePwdVisible = true;
                            }
                        })


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            closeModel() {
                this.$emit("closeEmailForm")
            },
            closeUpdatePwdForm() {
                this.updatePwdVisible = false
            }
        }
    }
</script>

<style scoped>

</style>